<script setup lang="ts">
  import { PropType } from 'vue'
  import { RadioConfig } from '../../hooks/types'

  defineOptions({
    name: 'OrderCustomForm',
  })

  const props = defineProps({
    options: {
      type: Array as PropType<RadioConfig['options']>,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
  })

  const emits = defineEmits<{
    (e: 'change', value: number): void
  }>()

  // 双向绑定
  const value = defineModel<string | boolean | number>('modelValue', { default: '' })

  /**
   * 选项选择事件
   * @param {number} val - 选择的内容
   */
  const handleChange = (val: number) => {
    emits('change', val)
  }
</script>

<template>
  <el-radio-group v-model="value" class="radio-group" @change="handleChange">
    <el-radio
      v-for="(item, index) in props.options"
      :key="index"
      :disabled="props.disabled"
      :value="item.value"
      size="small"
      >{{ item.label }}</el-radio
    >
  </el-radio-group>
</template>

<style scoped lang="scss">
  .radio-group {
    height: 28px;
    display: flex;
    column-gap: 14px;
    flex-wrap: wrap;

    :deep(.el-radio) {
      margin: 0 !important;
      height: 28px;
      display: flex;
      column-gap: 2px;
      align-items: center;

      .el-radio__label {
        padding: 0;
      }
    }
  }
</style>
